<template>
    <el-row class="lineBar">
      <div class="map" ref="map"></div>
    </el-row>
</template>

<script>
  import echarts from "echarts"
  import "echarts/map/js/province/guizhou"
  import "echarts/map/js/world"
  export default {
    name: "map",
    mounted() {
      let myChart = echarts.init(this.$refs.map)
      window.onresize = myChart.resize()
      myChart.setOption(this.initMap())
    },
    methods: {
      initMap() {
        let option = {
          title: {
            text: this.title,
            textStyle: {
              color: "white"
            }
          },
          tooltip: {},
          geo: { // 这个是重点配置区
            map: 'world', // 表示中国地图
            roam: true,
            zoom: 2,
            layoutCenter: ["30%", "30%"],
            label: {
              normal: {
                show: false, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            backgroundColor: '#404a59',
            itemStyle: {
              normal: {
                show: false,
                // areaColor: '#323c48',
                // borderColor: '#111',
                borderColor: 'rgba(0, 0, 0, 0.2)',
                areaColor: '#198ef7',
                emphasis: {
                  areaColor: '#a6c84c'// 地图触发地区的背景颜色
                }
              },
              emphasis: {
                // areaColor: null,
                areaColor: '#198ef7',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
              }
            }
          },
          series: [{
            name: "点",
            type: 'scatter',
            symbolSize: 20,
            itemStyle: {
              color: "#ffa022"
            },
            coordinateSystem: 'geo', // 对应上方配置
            data: this.dataList
          }
          ]
        }
        return option
      }
    }
  }
</script>

<style lang="scss">
  .map{
    margin-right: 0!important;
    height: calc((100vh - 167px) / 2 - 22px)!important;
    flex: 4.8;
  }
</style>
